<tpl var layoutStyle={ />
<style type="text/css">
	.resource-tree {
		margin: 10px 0;
	}

	.resource-tree .resource-tree-title::after {
		content: "";
		clear: both;
		display: block;
	}

	.resource-tree .resource-tree-title .tree-text {
		float: left;
		margin-left: 24px;
	}

	.resource-tree .resource-tree-title .tree-icon-checked {
		float: right;
		display: block;
		width: 24px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		font-size: 16px;
		margin-right: 5px;
	}
</style>
<tpl }; />
<tpl var layoutBody={ />
<div data-identity="sys:user:role" data-table="sys_role">
	<div class="layui-breadcrumb">
		<a href="/manage/index.jspx">首页</a>
		<a href="javascript:;">
			<cite>角色管理</cite>
		</a>
	</div>
	<hr>
	<form class="layui-form layui-form-pane" lay-filter="mSysRoleSearchForm">
		<div class="layui-form-item layui-inline nobottom">
			<label class="layui-form-label width-auto">角色名称</label>
			<div class="layui-input-inline">
				<input type="text" name="name" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item layui-inline nobottom">
			<label class="layui-form-label width-auto">角色标识</label>
			<div class="layui-input-inline">
				<input type="text" name="identity" placeholder="请输入角色标识" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item layui-inline nobottom">
			<button class="layui-btn" lay-submit lay-filter="mSysRoleSearchForm">查找</button>
			<a href="create.jspx" class="layui-btn layui-btn-primary">添加</a>
		</div>
	</form>
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md6">
			<table class="layui-table" lay-data="{height: 'full-220', page: {hash: 'page'}, limit:30, loading:true, url:'list.json',id: 'mSysRoleTable'}" lay-filter="mSysRoleTableFilter">
				<thead>
					<tr>
						<th lay-data="{unresize:true,field:'id', align: 'center', width:60}">ID</th>
						<th lay-data="{unresize:true,field:'name'}">角色名称</th>
						<th lay-data="{unresize:true,field:'identity'}">角色标识</th>
						<th lay-data="{unresize:true,field:'remark'}">备注</th>
						<th lay-data="{unresize:true,fixed: 'right', width:140, align:'center', toolbar: '#toolbar-tpl'}"></th>
					</tr>
				</thead>
			</table>
		</div>
		<div class="layui-col-md6">
			<div class="layui-elem-field resource-tree">
				<div class="layui-field-box">
					<div class="resource-tree-title">
						<p class="tree-text">资源名称</p>
						<i class="tree-icon-checked">M</i>
						<i class="tree-icon-checked">V</i>
					</div>
					<hr>
					<div class="resource-tree-body">
						<p style="text-align: center;line-height:  36px;font-size:  18px;color: #888;text-align: center;">请选择角色</p>
					</div>
					<hr>
					<div class="resource-tree-tool">
						<button class="layui-btn layui-btn-sm" id="resource-tree-save">保存</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<tpl }; />

<tpl var layoutScript={ />
<script type="text/javascript">
	layui.config({
		base: '${webCdn}/plugins/layui/modules/'
	}).extend({
		http: 'http/http.min',
		message: 'message/message.min',
		authtree: 'authtree/authtree.min',
		eventbus: 'eventbus/eventbus.min'
	}).use(['element', 'eventbus', 'authtree', 'message', 'table', 'http'], function () {
		var authtree = layui.authtree('.resource-tree-body');

		// 搜索框表单提交事件
		layui.form.on('submit(mSysRoleSearchForm)', function (data) {
			layui.table.reload('mSysRoleTable', {
				where: data.field,
				page: {
					'curr': 1
				}
			});
			return false;
		});

		// 数据表格-工具栏-删除按钮点击事件
		layui.eventbus.table('mSysRoleTableFilter', 'del', function (obj) {
			layui.message.confirm('确定删除该角色?', function (index) {
				layui.http.post(`save.json?oper=delete&id=\${obj.data.identity}`, function (res) {
					layui.message.success(res.message, () => obj.del());
				});
			});
		});

		// 数据表格-工具栏-授权按钮点击事件
		layui.eventbus.table('mSysRoleTableFilter', 'perms', function (obj) {
			layui.http.post(`resource/get.json?identity=\${obj.data.identity}`, function (res) {
				authtree.setParam(obj.data.identity);
				authtree.setData(res.data);
			});
		});

		// 权限树-保存点击事件
		$('#resource-tree-save').on('click', function () {
			layui.http.json(`resource/put.json?identity=\${authtree.getParam()}`, authtree.getData(), (res) => {
				layui.message.success(res.message);
			});
		});
	});
</script>
<script type="text/html" id="toolbar-tpl">
	<div class="layui-btn-group">
		<button class="layui-btn layui-btn-xs" lay-event="perms">授权</button>
		<a href="update.jspx?id={{d.id}}" class="layui-btn layui-btn-xs">编辑</a>
		<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
	</div>
</script>
<tpl }; />
<tpl include( "../../tpl/layout.html" ,{identity: "sys:user:role" ,layoutStyle:layoutStyle,layoutBody:layoutBody,layoutScript:layoutScript}){} />